<template>
  <el-dialog draggable overflow :title="'装卸'" v-model="visible" :width="1150" destroy-on-close @closed="$emit('closed')">
    <el-tabs type="border-card">
      <el-tab-pane ref="tab" label="基础信息">
        <el-row>
          <el-col :span="11">
            <sc-VxeTable ref="xGrid1" :url="$API.comprehensive.car.list" :gridOps="gridOps" @cellClick="cellClick"
              :gridEvts="gridEvents" :tablecode="'comprehensive_car_additem'">
            </sc-VxeTable>
          </el-col>
          <el-col :span="13" style="border-left: 1px solid #ffbe7a;">
            <sc-VxeTable ref="xGrid2" :data="items" :gridEvts="gridEvents" :gridOps="gridOps"
              :tablecode="'comprehensivel_car_detail'">
            </sc-VxeTable>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="visible = false">关 闭</el-button>
    </template>
  </el-dialog>
  <save-car v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false">
  </save-car>
  <skBrowserChoose v-model="dialog.choose" :name="'car_carry_detail_browser'" @close="dialog.choose = false"
    @select="additems" :params="getParams">
  </skBrowserChoose>
</template>

<script>
import saveCar from "./saveCar";
import skBrowserChoose from "@/components/skBrowserChoose";
export default {
  emits: ["success", "closed"],
  components: { saveCar, skBrowserChoose },
  data() {
    return {
      dialog: {
        save: false,
        choose: false
      },
      details: [],
      id: 0,
      items: [],
      gridOps: {
        height: 600,
      },
      gridEvents: {
        saveRow: (body) => {
          return this.$API.comprehensive.car.saveAmount.post(body);
        },
        add: () => {
          this.add();
        },
        addItem: () => {
          this.choose();
        },
        removeItem: ({ button }) => {
          this.removeItem(button.selectRecords.map(v => v.id));
        }
      },
      visible: false,
    };
  },
  mounted() { },
  methods: {
    cellClick({ row }) {
      this.id = row.id;
      this.getItems(row.id);
    },
    removeItem(ids) {
      this.$API.comprehensive.car.deleteItem.post({ ids: ids }).then(() => {
        this.getItems(this.id);
      });
    },
    additems(items) {
      this.dialog.choose = false;
      let row_ids = items.map(v => v.id);
      this.$API.comprehensive.carCarryDetail.saveCarItems.post({ id: this.id, row_ids: row_ids }).then(() => {
        this.getItems(this.id);
      });

    },
    choose() {
      this.dialog.choose = true;
    },
    getParams() {
      return { car_count: 1, 'material.material_nature_id': 3 };
    },
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open();
      });
    },
    //显示
    open() {
      this.visible = true;
      return this;
    },

    //表单提交方法
    submit() {

    },
    handleSuccess() {
      this.$refs.xGrid1.refresh();
    },
    async getItems(id) {
      var res = await this.$API.comprehensive.car.details.get({ filter: [{ main_id: id }] });
      if (res.code == 200) {
        this.items = res.data;
      } else {
        this.$alert(res.message, "提示", { type: "error" });
      }
    },
  },
};
</script>

<style></style>
